<template>
    <el-container class="home-container">
      <el-header>
        <div>
          <span>个人学习空间系统</span>
        </div>

        <el-menu mode="horizontal" background-color="#545c64" text-color="#fff"
        active-text-color="#ffd04b" :router="true">
          <el-menu-item index="/Desktop" >
            <template slot="title">
              <span>桌面</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/Home" >学习管理</el-menu-item>
          <el-menu-item index="/user/User">个人中心</el-menu-item>

        </el-menu>

        <div>
          <el-button type = "info" round @click="logout">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '64px':'200px' " >
          <!-- 菜单栏折叠 -->
          <div class="toggle-button" @click="toggleCollapse">>></div>
          <!-- 侧边栏菜单区域 -->
          <el-menu
            background-color="#545c64"
            text-color="#fff" active-text-color="#ffd04b"
            :collapse="isCollapse"  :collapse-transition="false"
            :router="true">
            <!-- 一级菜单 -->
            <el-submenu>
              <!-- 菜单模板 -->
              <template slot="title">
                <!-- 图标与文本 -->
                <i class="el-icon-location"></i>
                <span>学习计划</span>
              </template>
              <!-- 二级菜单 -->
                <el-menu-item index="/Plan">
                  <template slot="title">
                    <!-- 图标与文本 -->
                    <span>日程安排</span>
                  </template>
                </el-menu-item>

                <el-menu-item index="/plan_2">计划列表</el-menu-item>

            </el-submenu >

            <el-menu-item index="/P_recommend">
              <i class="el-icon-menu"></i>
              <span slot="title">伙伴推荐</span>
            </el-menu-item>

            <el-menu-item index="/Style">
              <i class="el-icon-menu"></i>
              <span slot="title">学习风格</span>
            </el-menu-item>

            <el-menu-item index="/File">
              <i class="el-icon-menu"></i>
              <span slot="title">文件管理</span>
            </el-menu-item>

          </el-menu>
        </el-aside>
        <!-- 主体区域 -->
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>

        </el-main>
      </el-container>
    </el-container>

</template>

<script>
  import aplayer from 'vue-aplayer'
  import {reset} from '../router/index.js';
  export default {
    data(){
      return{
        //默认不折叠
        isCollapse:false,

        musicShow:false,

        mini:false,
          musics:  [
          {
              title:'天空之城',
              artist: '黄叶',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',
              pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg',
          },
          {
              title:'蒲空英的约定',
              artist: '黄叶',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a',
              pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg" ,
          },
          {
              title:'无畏',
              artist: '马頔',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E9%A9%AC%E9%A0%94%20-%20%E6%97%A0%E7%95%8F.flac',
              pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E4%BB%A5%E5%AE%B6%E4%B9%8B%E5%90%8D.jpg', // prettier-ignore
          },
          {
              title:'蓝乐',
              artist: '白纸',
              url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%93%9D%E4%B9%90%20-%20%E7%99%BD%E7%BA%B8.flac',
              pic: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/-1992181439.jpg" ,
          },
          ],
      }
    },

    methods:{
      logout(){
        //清空token，跳转到login
        window.sessionStorage.clear()
        reset()
        this.$router.push('/login')
      },
      //点击按钮切换菜单的折叠展开
      toggleCollapse(){
        this.isCollapse = ! this.isCollapse
      },
      music_Show(){
        this.musicShow=!this.musicShow
      },
      // handleSelect(key, keyPath) {
      //   console.log(key, keyPath);
      // },

    }
  };
</script>

<style >
.home-container{
  height:100%;
}

.el-header{
  background-color: darkslategrey;
  display:flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 30px;

}
.el-aside{
  background-color: lightseagreen;
}
.el-main{
  /* #eaedf */
  background-color:#eaedf1;
  margin: 0px;
  padding: 0px;
}
.toggle-button{
  background-color: #545c64;
  font-size:10px;
  line-height: 24px;
  color:#fff;
  text-align:center;
  letter-spacing: 0.2em;
  cursor:pointer;
}

</style>
